
<!-- 
	/**
	 * All rights Reserved, Designed By www.youyacao.com <br>
	 * @Description:漫画列表 <br>
	 * @version 蜻蜓Q系统  <br>
	 * @author:成都市一颗优雅草科技有限公司  <br>
	 * 注意：使用我司开源源代码请遵循license文件的协议仅供个人非盈利使用，禁止用于其他的商业用途
	 * 需要商业用途或者定制开发等可访问songshu.youyacao.com  联系QQ:2853810243 422108995 23625059584
	 * 正版系统查询系统 zhengbancha.youyacao.com
	 */
 -->








<template>
	<view>
		<view class="content">
			<view class="search">
				<view class="search-content">
					<view class="search">
						<view class="search-content">
							<u-search bg-color="#Fff" placeholder="请输入内容" v-model="bookDate.keyword" shape="square"
								:showAction="false" height="78" @search="search" @clear="clear"></u-search>
						</view>
						<view class="search-btn" @click="signin">
							<view class="search-add">
								<image src="../../static/edit.png"
									style="width: 60rpx; height: 60rpx;display: inline-block;" mode="aspectFill">
								</image>
								 <view style="font-size: 25rpx;text-align: center;margin-top: -10rpx;color: #333;">签到</view>
							</view>
							
						</view>
					</view>
				</view>
			</view>
			<view class="menu-content">
				<u-tabs :list="list" bg-color="#FFDA33" :active-item-style="{
							'fontSize':'40rpx',
							'color':'#333',
						}" active-color="#FFDA33" height="60" gutter="15" :current="current" @change="change"></u-tabs>
			</view>


		</view>
		<view class="classification-box">
			<view class="classification-title">分类精选</view>
			<!-- <view>更多</view> -->
		</view>
		
<!-- 		:active-item-style="{
		
			'color':'#333',
		     'backgroundColor':'#FFDA33!important',
			'width':'150rpx',
			 'height':'60rpx'
			,
		}" -->
		<view class="menu-content tabs">
			<u-tabs :list="list2" :show-bar="false" active-color="#FFDA33" :inactiveStyle="{'width':'150rpx',
						 'height':'60rpx'}"  height="60" gutter="15" :current="current2" @change="changeSelect"></u-tabs>
		</view>
		<!-- 小说 -->
		<view>
			<view class="book-li" v-for=" (item2,index) in bookList"  :key="index" v-if='index==0'   @click="bookMore(item2)">
				<view class="book-left-item" ><image :src="item2.cover" mode="aspectFill"></image></view>
				<view class="book-right-i">
					<view class="book-title">
						<view>{{item2.name}}</view>
						<view class="book-text">
							{{item2.intro}}
						</view>
					</view>
				</view>
			</view>

		</view>
		<!-- 小说 end-->
		<view class="books-list">
			<view class="books-list-item" v-for=" item in bookList" @click="bookMore(item)">
				<view class="book-read-img">

					<image :src="item.cover" mode="aspectFill"></image>
				</view>
				<view class="books-read-title">{{item.name}}</view>
			</view>
	<view class="nav-bar">
		<nav-bar></nav-bar>
	</view>
		
		</view>
	</view>
</template>
<script>
	
	var formatNum = function(num){
	  return num < 10 ? "0" + num : num
	}

	import NavBar from '@/components/v-tabbar/v-tabbar.nvue'
	import {
		getBookFl,
		getBookList,
		getSignin
	} from '@/common/api.js'
	export default {
		components: {NavBar},
		data() {
			return {
				xs: {
					model_id: 1,
				},
				current: 0,
				current2: 0,
				keyword: "",
				bookList:[],
				list2: [
				],
				data: {
					title: "",
					body: "",
					category_id: "",
				},
				bookDate:{
					module_id:"1",
					keyword:"",
					type_id:[3],
				},
				list: [],

			};
		},
		onLoad(option) {
			this.data.category_id = option.id
			console.log(this.data)
		},
		onShow() {
			this.getList();
			this.getBookList();
		},
		methods: {
			signin(){
				var data={
					day:this.formatDate(new Date()),
					type:"AMOUNT",
				}
				getSignin(data).then(res=>{
					if(res.code==200){
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				
				})
			},
			 // 实时-时间-数据转换
			    formatDate(value) {
			      var year = value.getFullYear()
			      var month = formatNum(value.getMonth() + 1)
			      var day = formatNum(value.getDate())
			      var hour = formatNum(value.getHours())
			      var min = formatNum(value.getMinutes())
			      var sec = formatNum(value.getSeconds())
			      return year + "-" + month + "-" + day
			    },
		
			search(){
					this.getBookList();
			},
			clear(){
					this.getBookList();
			},
			bookMore(e){
				console.log(e)
					uni.navigateTo({
									url: '/pages/novel/bookDefault?id='+e.id
								});
			},
			change(index) {
				this.current = index;
				this.current2=0;
				this.getClassification(this.list[this.current].id,this.current2)
			
				
			},
			changeSelect(index) {
				
				var arr=[];
				this.current2 = index;
				var id=this.list2[index].id;
				arr.push(id)
				this.bookDate.type_id=arr;
				this.getBookList();
			},
			//精选分类
			getClassification(id,index) {
				var data = {
					pid: id
				}
				getBookFl(data).then(res => {
					if (res.code == 200) {
						this.list2 = res.data;
						 this.changeSelect(index)
					}
				})
			},
			//分类列表
			getList() {
				getBookFl(this.xs).then(res => {
					if (res.code == 200) {
						this.list = res.data;
						this.getClassification(this.list[0].id.toString())
					}
				})
			},
			getBookList(){
				getBookList(this.bookDate).then(res=>{
					 if(res.code==200){
						 this.bookList=res.data
						
					 }
				})
			},

		},
	}
</script>

<style>
	@import './index.css';

	.book-li {
		display: flex;
	}

	page {
		background-color: #fff;
	}

	.content {
		background-color: #FFDA33;
	}

	.search {
		padding-top: 50rpx;
		padding-bottom: 10rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;

		display: flex;
		justify-content: space-between;
	}

	.search-content {
		width: 98%;
		margin-right: 2%;
	}

	.search-add {
		color: red;
		text-align: center;
		margin-left: 10rpx;
		width: 50rpx;
		height: 50rpx;
		line-height: 52rpx;
		border-radius: 50%;
		
		font-size: 20rpx;
		color: red;
	}

	.search-btn {
		text-align: center;
	}

	.search-text {
		font-size: 20rpx;
		color: #fff;
	}

	.classification-box {
		display: flex;
		justify-content: space-between;
		margin-top: 50rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
	}

	.classification-title {
		font-size: 40rpx;
		font-weight: bold;
	}

	.tabs ::v-deep .u-tab-item {
		width: 100rpx !important;
		height: 60rpx !important;
		border-radius: 30rpx !important;
		background-color: #F5F6F8 !important;
		margin-right: 30rpx !important;
	}
	.nav-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}
</style>
